<template>
  <div>
    <el-dialog
      title="订单详情"
      :visible="showOrderDialog"
      width="80%"
      @close="showDialog"
    >
      <!-- 内容 -->
      <div>
        <el-row style="margin-left:35px">
          <h3> 基础信息</h3>
        </el-row>
        <el-row class="detail">
          <el-col class="elcol"> 订单号： <span>{{ orderMinuteData.orderId }}</span></el-col>
          <el-col class="elcol"> 下单时间： <span>{{ orderMinuteData.orderTime }}</span></el-col>
          <el-col class="elcol">  状态： <span> {{ orderMinuteData.status }} </span></el-col>
        </el-row>
        <el-row style="margin:0 0  10px 35px">
          店铺名称： <span>{{ orderMinuteData.shopName }}</span>
        </el-row>
        <el-row>
          <el-row style="margin-left:35px"><h4>选购列表商品：</h4></el-row>
          <el-table :data="orederGoodsList">
            <el-table-column
              label="商品图片"
            >
              <template v-slot:default>
                <div>
                  <img v-for="item in orederGoodsList" :key="item.id" style="width:100%" :src="item.goodsImg" alt="">
                </div>
              </template>
            </el-table-column>
            <el-table-column
              label="商品名"
              prop="goodsName"
            />
            <el-table-column
              label="数量"
              prop="goodsNumber"
            />
            <el-table-column
              label="单价"
              prop="salesPrice"
            />
          </el-table>
        </el-row>
      </div>
      <hr>

      <div class="maleft">
        <h3>配送信息</h3>
        <el-row class="detail mgbottom">
          <el-col>
            配送方式： <span>{{ orderMinuteData.distribution }}</span>
          </el-col>
          <el-col>
            收货地址： <span>{{ orderMinuteData.shippingAddress }}</span>
          </el-col>
        </el-row>
        <el-row class="detail  mgbottom">
          <el-col>联系人： <span>{{ orderMinuteData.contacts }}</span> </el-col>
          <el-col> 电话： <span> {{ orderMinuteData.tel }}</span> </el-col>
        </el-row>
      </div>
      <hr>

      <div class="maleft">
        <h3>费用统计</h3>
        <el-row class="detail  mgbottom">
          <el-col>包装： <span>￥ {{ orderMinuteData.packingExpense }}</span></el-col>
          <el-col>活动优惠： <span>￥{{ orderMinuteData.packingExpense }} <i style="font-size:10px">满 50-2</i></span></el-col>
        </el-row>
        <el-row class="detail  mgbottom">
          <el-col>优惠券： <span>￥{{ orderMinuteData.coupon }}</span></el-col>
          <el-col>配送费： <span>￥{{ orderMinuteData.shippingFee }} </span></el-col>
        </el-row>
        <el-row>
          合计   <span class="spanone">￥85.4</span>
        </el-row>
      </div>
      <!-- 按钮 -->
      <template v-slot:footer>
        <span class="dialog-footer">
          <el-button @click="showDialog">取 消</el-button>
          <el-button type="primary" @click="showDialog">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Orderdetail',
  props: {
    showOrderDialog: {
      type: Boolean,
      required: true
    },
    orderMinuteData: {
      type: Object,
      required: true
    },
    orederGoodsList: {
      type: [Object, Array],
      required: true
    }
  },
  data() {
    return {
      // orderData: {}, // 基础信息
      // // 商品信息
      // productData: {
      //   productImg: '', // 商品图片
      //   producName: '', // 商品名称
      //   productNumber: '', // 商品数量
      //   productPrice: '' // 商品价格
      // },
      // // 配送信息
      // disData: {
      //   dispatching: '', // 配送方式
      //   disAddress: '', // 收货地址
      //   linkman: '', // 联系人
      //   phone: '' // 联系方式
      // },
      // // 费用统计
      // statisData: {
      //   pack: '', // 包装
      //   activCoupon: '', // 活动优惠
      //   disCoupon: '', // 优惠券
      //   disPack: ''// 配送费
      // }
    }
  },
  methods: {
    showDialog() {
      this.$emit('update:showOrderDialog', false)
    }
  }
}
</script>

<style lang="less">
    .detail{
        display: flex;
        justify-content: space-between;
    }
    .elcol{
    display: flex;
    justify-content: space-evenly;
    margin: 10px 0 10px 0;
    }
    .mgbottom{
        margin-bottom: 10px;
    }
    .maleft{
        margin-left: 35px;
    }
    .spanone{
        margin-left: 20px;
        color:red;
        font-size:24px
    }
</style>
